객체 리터럴

질문 List

객체 리터럴 🔥

1. 자바스크립트에서 객체란 뭘까요?
2. 함수와 메서드의 차이점에 대해 알고 계신가요?
3. 자바스크립트에서 객체를 생성하는 방법은 어떤 것들이 있나요?

질문 & 정답 List

객체 리터럴 🔥

1. 자바스크립트에서 객체란 뭘까요?

• Javascript는 객체 기반의 스크립트 언어로, JS를 이루고 있는거의 '모든 것'이 객체
• 원시 타입을 제외한 나머지 값(함수, 배열, 정규표현식 등)은 모두 객체
• 키와 값으로 구성된 프로퍼티들의 집합
  • 프로퍼티의 값으로 JS에서 사용할 수 있는 모든 값을 사용 가능
  • JS의 함수는 일급 객체이므로 값으로 취급 가능
    • 즉, 프로퍼티 값으로 함수를 사용할 수 있으며, 프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메서드라 부른다.
• 객체는 데이터를 의미하는 프로퍼티 + 데이터를 참조하고 조작할 수 있는 동작을 의미하는 메서드로 구성된 집합
• 객체지향의 상속을 구현하기 위해 프로토타입이라고 불리는 객체의 프로퍼티와 메소드를 상속받을 수 있음
• 배열과 달리 프로퍼티를 열거할 때 순서를 보장 X

1. 프로퍼티 : 프로퍼티 키와 프로퍼티 값으로 구성
   • 프로퍼티 키 : 프로퍼티를 식별하기 위한 식별자
     • 빈 문자열을 포함하는 모든 문자열 또는 symbol 값. 그 외의 값을 지정하면 암묵적 타입 변환이 일어나 문자열이 됨
     • 함수와 같은 객체도 프로퍼티 키에 할당 가능
   • 프로퍼티 값 : 자바스크립트에서 사용할 수 있는 모든 값(문자열, 숫자, 불리언, 심벌, 객체, 함수, null, undefined) -> 이 중 프로퍼티 값이 함수일 경우 메소드라 부름
2. 메소드 : 프로퍼티 값이 함수일 경우, 메소드라 부름

2. 자바스크립트에서 객체를 생성하는 방법은 어떤 것들이 있나요?

• Java같은 class 기반 객체 지향 언어는 class를 사전에 정의하고 필요한 시점에 new 연산자를 사용하여 instance를 생성하는 방식으로 객체 생성
• Javascript는 prototype기반 객체 지향 언어로서 class라는 개념이 없고, 별도의 객체 생성 방법이 존재
  • ES6에서 class 도입
  • prototype기반 객체 지향 언어는 class 없이 prototype chain과 clousre등으로 객체 지향 언어의 상속, 캡슐화(정보 은닉) 등의 개념 구현
  • ES6의 class도 사실 함수이고, 기존 prototype 기반 패턴의 문법적 설탕

1. 객체 리터럴

   const circle = {
     radius: 5,
     getDiameter() {
       return 2 * this.radius;
     },
   };
2. Object 생성자 함수
   • 생성자 : new 키워드와 함께 객체를 생성하고 초기화하는 함수
   • JS의 빌트인 생성자 함수 : String, Number, Boolean, Function, Array, Date, RegExp, Promise 등 제공
   • 일반 함수와 생성자 함수를 구분하기 위해 일반적으로 PascalCase 사용

   const circle = new Object();
   circle.radius = 5;
   circle.getDiameter = function () {
     return 2 * this.radius;
   };
   • 객체 리터럴 방식으로 생성된 객체 역시 빌트인 함수인 Object 생성자 함수로 객체를 생성하는 것을 단수화시킨 축약 표현 => 개발자가 일부러 Object 생성자 함수를 사용해 객체를 생성할 일은 거의 없음
3. 생성자 함수

• 객체 리터럴 방식과 Object 생성자 함수 방식은 동일한 프로퍼티를 갖는 객체임에도 불구하고 매번 같은 프로퍼티를 기술해야 함
• 생성자 함수를 사용하면 마치 객체를 생성하기 위한 탬플릿(class)처럼 사용하여 프로퍼티가 동일한 객체 여러 개 간편하게 생성할 수 있음

function Circle(radius) {
  var a = 5; // private
  this.radius = radius; // public
  this.getDiameter = function () {
    // public
    return 2 * this.radius;
  };
}
const circle1 = new Circle(5);
const circle2 = new Circle(10);

• 프로퍼티 또는 메소드명 앞에 기술한 this는 생성자 함수가 생성할 instance를 가리킴
• this에 연결(binding)되어 있는 프로퍼티와 메소드는 public(외부에서 참조 가능)
• 생성자 함수 내부에서 선언된 일반 변수는 private(외부에서 참조 불가능)

Reference

• 모던 자바스크립트 Deep Dive - 객체